<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5二维码在线生成代码 - A5源码</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<style type="text/css">
	main { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 100%; background-color: #EFEFEF; padding: 1em 0;}
	main section { min-width: 250px; max-width: 50%; height: 100%; text-align: center; }
	main img { border: 2px solid #fff; }
	main form { padding: 25px 0 50px 0; text-align: left; }
	main form label { display: block; margin-top: 10px; font-weight: bold; }
	main form input,  main form select { width: 100%; }
	 main form input:invalid {
	 outline: 2px solid #f00;
	 color: #f00;
	}
</style>

</head>
<body>
<main>
	<section> <img id="qrious">
	<form autocomplete="off">
		<label> URL地址
		<input type="text" name="value" value="http://down.admin5.com/" spellcheck="false">
	  </label>
		<label> 二维码尺寸
		<input type="number" name="size" placeholder="100" min="100" max="1000" value="250">
	  </label>
		<label> 二维码级别
		<select name="level">
			<option value="L">L - 7% damage</option>
			<option value="M">M - 15% damage</option>
			<option value="Q">Q - 25% damage</option>
			<option value="H">H - 30% damage</option>
		  </select>
	  </label>
		<label> 二维码背景色
		<input type="color" name="background" value="#ffffff">
	  </label>
		<label> 二维码前景色
		<input type="color" name="foreground" value="#000000">
	  </label>
	  </form>
  </section>
</main>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/umd/qrious.js"></script> 
<script type="text/javascript">
	(function() {
		var $background = document.querySelector('main form [name="background"]')
		var $foreground = document.querySelector('main form [name="foreground"]')
		var $level = document.querySelector('main form [name="level"]')
		var $section = document.querySelector('main section')
		var $size = document.querySelector('main form [name="size"]')
		var $value = document.querySelector('main form [name="value"]')

		var qr = window.qr = new QRious({
		  element: document.getElementById('qrious'),
		  size: 250,
		  value: 'http://www.htmleaf.com/'
		})

		$background.addEventListener('change', function() {
		  qr.background = $background.value || null
		})

		$foreground.addEventListener('change', function() {
		  qr.foreground = $foreground.value || null
		})

		$level.addEventListener('change', function() {
		  qr.level = $level.value
		})

		$size.addEventListener('change', function() {
		  if (!$size.validity.valid) {
			return
		  }

		  qr.size = $size.value || null

		  $section.style.minWidth = qr.size + 'px'
		})

		$value.addEventListener('input', function() {
		  qr.value = $value.value
		})
	  })()
</script>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://down.admin5.com/" target="_blank">A5源码</a></p>
</div>
</body>
</html>